import React from 'react'
import { Row, Col, Table, Alert, Icon } from 'antd';

import GM from 'g2-mobile';
GM.Global.pixelRatio = 2;
const Util = GM.Util;

import PanelBox from '../../../components/PanelBox';

import createGM from '../../../utils/gm';
//import { chartData, pieData, barData } from '../../../../fake/chart2.js';
import api from '../../../api/home';

import './index.less'

let Shape = GM.Shape;
let G = GM.G;


export default class Home extends React.Component {
  constructor () {
    super()
  }


  state = { 
    data:[],
    yesterday:'',
    lastweek:'',
    lastmonth:'',
    chartData: [
      {"time": '周一',"tem": 10,"city": "beijing"},
      {"time": '周二',"tem": 22,"city": "beijing"},
      {"time": '周三',"tem": 20,"city": "beijing"},
      {"time": '周四',"tem": 26,"city": "beijing"},
      {"time": '周五',"tem": 20,"city": "beijing"},
      {"time": '周六',"tem": 26,"city": "beijing"},
      {"time": '周日',"tem": 28,"city": "beijing"},
      {"time": '周一',"tem": 5,"city": "newYork"},
      {"time": '周二',"tem": 12,"city": "newYork"},
      {"time": '周三',"tem": 26,"city": "newYork"},
      {"time": '周四',"tem": 20,"city": "newYork"},
      {"time": '周五',"tem": 28,"city": "newYork"},
      {"time": '周六',"tem": 26,"city": "newYork"},
      {"time": '周日',"tem": 20,"city": "newYork"}
    ],
    pieData:[{pointer: '开门使用率',value: 5, length:2,y:1.05}],
    barData:[
      {"time":"周一","tem":6.9,"city":"tokyo"},
      {"time":"周二","tem":9.5,"city":"tokyo"},
      {"time":"周三","tem":14.5,"city":"tokyo"},
      {"time":"周四","tem":18.2,"city":"tokyo"},
      {"time":"周五","tem":21.5,"city":"tokyo"},
      {"time":"周六","tem":25.2,"city":"tokyo"},
      {"time":"周日","tem":26.5,"city":"tokyo"}
    ],
  };

 

  fetch = (params = {}) => {

    params={officeType:this.props.profile.user.officeType}
    api.get('/yesterday', {   //昨天
      ...params,
      responseType: 'json'
    }).then((data) => {
      data = data.data;
      this.setState({
        yesterday:data.data.sum
      });
    });

    api.get('/lastweek', {   //上周
      ...params,
      responseType: 'json'
    }).then((data) => {
      data = data.data;
      this.setState({
        lastweek:data.data.sum
      });
     
    });

    api.get('/lastmonth', {   //上月
      ...params,
      responseType: 'json'
    }).then((data) => {
      data = data.data;
      this.setState({
        lastmonth:data.data.sum
      });
    });
  } 

  bargraph = (params = {}) => {
        params={officeType:this.props.profile.user.officeType}
        api.get('/querycolumn', {   //柱状图
          ...params,
          responseType: 'json'
        }).then((data) => {
          data = data.data;
          this.setState({
            barData:data.data
          });
        });


        api.get('/querycurve', {   //曲线图
          ...params,
          responseType: 'json'
        }).then((data) => {
          data = data.data;
          this.setState({
            chartData:data.data
          });
        });

        api.get('/usagerate', {   //开门使用率
          ...params,
          responseType: 'json'
        }).then((data) => {
          data = data.data;
          this.setState({
            pieData:data.data
          });
        });

      } 

    columns = [{
        title: '金额（单位/元）',
        key: 'money',
        dataIndex: 'money',
        width: 150,
      }, {
        title: '类型',
        dataIndex: 'age',
        width: 150,
        render:(text, record, index) =>  {
          switch(record.type){
            case 100:
              return '充值';
            case 101:
              return '提现';
            case 102:
              return '发布广告机广告扣除 ';
            case 103:
              return '发布家庭锁广告扣除';
            case 104:
              return '发布手机屏保广告扣除';
            case 105:
              return '广告机广告获得';
            case 106:
              return '家庭锁广告获得';
            case 107:
              return '手机屏保广告获得';
            default:
              return '未知';
          }
        },
      }, {
        title: '时间',
        key: 'createDate',
        dataIndex: 'createDate',
        width: 150,
      }];
      
   //   tableData = [];

      recen = (params = {}) => {
        params={officeType:this.props.profile.user.officeType}

        api.get('/earnings', {   //最近收益
          ...params,
          responseType: 'json'
        }).then((data) => {
          data = data.data;
          this.setState({
            data:data.data
          });
        });
      } 
      /*for (var i = 0; i < 100; i++) {
        tableData.push({
          key: i,
          name: `Edward King ${i}`,
          age: 32,
          address: `London, Park Lane no. ${i}`,
        });
      } */

  componentWillMount () {
    this.fetch({});
    this.bargraph({});
    this.recen({});
  }

  callback() {
  }
  render () {


    //自定义绘制数据的的形状
Shape.registShape('point', 'dashBoard', {
  getShapePoints:function(cfg){
    let x = cfg.x;
    let y = cfg.y;
    return [
      {x: x, y: y},
      {x: x, y: 0.5}
    ]
  },
  drawShape: function(cfg, canvas){
    let point1 = cfg.points[0];
    let point2 = cfg.points[1];
    point1 = this.parsePoint(point1);
    point2 = this.parsePoint(point2);
    G.drawLines([point1, point2], canvas, {
      stroke: '#18b7d6',
      lineWidth: 2
    });
    let text = cfg.origin._origin.value.toString();
    G.drawText(text+'%', cfg.center, canvas, {
      fillStyle: '#f75b5b',
      font:'30px Arial',
      textAlign: 'center',
      textBaseline: 'bottom'
    });
    G.drawText(cfg.origin._origin.pointer, cfg.center, canvas, {
      fillStyle: '#ccc',
      textAlign: 'center',
      textBaseline: 'top'
    });
  }
});
const Pie = createGM(chart => {
  chart.source(this.state.pieData, {
    'value': {type: 'linear',min: 0,max: 15,tickCount: 6},
    'length': {type: 'linear',min: 0,max: 10},
    y: {type: 'linear',min: 0, max: 1}
  });
  chart.coord('polar',{
    inner: 0,
    startAngle: -1.25 * Math.PI,
    endAngle: 0.25 * Math.PI
  });
  //配置value轴刻度线
  chart.axis('value', {
    tickLine: {
      strokeStyle: '#b9e6ef',
      lineWidth: 2,
      value: -5
    },
    label: null,
    grid: null,
    line: null
  });
  chart.axis('y', false);
  //绘制仪表盘辅助元素
  chart.guide().arc([0,1.05],[4.8,1.05],{
    strokeStyle: '#18b7d6',
    lineWidth:5,
    lineCap: 'round'
  });
  chart.guide().arc([5.2,1.05],[9.8,1.05],{
    strokeStyle: '#ccc',
    lineWidth:5,
    lineCap: 'round'
  });
  chart.guide().arc([10.2,1.05],[15,1.05],{
    strokeStyle: '#ccc',
    lineWidth:5,
    lineCap: 'round'
  });
  chart.guide().arc([0,1.2],[15,1.2],{
    strokeStyle: '#ccc',
    lineWidth:1
  });
  chart.guide().text([-0.5,1.3], '0.00%', {
    fillStyle: '#ccc',
    font:'18px Arial',
    textAlign: 'center'
  });
  chart.guide().text([7.5,0.7], '7.50%', {
    fillStyle: '#ccc',
    font:'18px Arial',
    textAlign: 'center'
  });
  chart.guide().text([15.5,1.3], '15.00%', {
    fillStyle: '#ccc',
    font:'18px Arial',
    textAlign: 'center'
  });
  chart.point().position('value*y').size('length').color('#18b7d6').shape('dashBoard');
  chart.render();
}, 218);

const Line = createGM(chart => {
  let defs = {
    time: {
      tickCount: 7,
      range:[0,1]
    },
    tem: {
      tickCount: 5,
      min: 0
    }
  };
  //配置time刻度文字样式
  let label = {
    fill: '#979797',
    font: '14px san-serif',
    offset: 6
  };
  chart.axis('time', {
    label: function (text, index, total) {
      let cfg = Util.mix({}, label);
      // 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
      if (index === 0) {
        cfg.textAlign = 'start';
      }
      if (index > 0 && index === total - 1) {
        cfg.textAlign = 'end';
      }
      return cfg;
    }
  });
  //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
  chart.axis('tem', {
    label: {
      fontSize: 14
    }
  });
  chart.source(this.state.chartData, defs);
  chart.line().position('time*tem').color('city').shape('smooth');
  chart.render();
}, 200);

const Bar = createGM(chart => {
  chart.source(this.state.barData, {
    tem: {
      tickCount: 5
    }
  });
  //配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
  chart.axis('time', {
    label:{
      fontSize: 14
    },
    grid: null
  });
  chart.axis('tem', {
    label:{
      fontSize: 14
    }
  });
  chart.intervalStack().position('time*tem').color('city');
  chart.render();
}, 320);




    return (
      <div>
        <div style={{'marginBottom': '20px'}}>
          <Alert
            message="报表延迟友情提示"
            description="我们提供的报表都不是实时的，报表运算内容复杂，数据量庞大，不能实时计算获得结果。如有核算不准确的信息请及时通知我们。"
            type="info"
            showIcon
          />
        </div>
        <Row gutter={16} type="flex" justify="space-between">
          <Col xs={24} md={14}>
            <Row gutter={16} type="flex" justify="space-between">
              <Col xs={24} md={8}>
                <PanelBox className="card-item">
                  <Icon type="pay-circle-o" />
                  <ul>
                    <li>${this.state.yesterday}</li>
                    <li>昨天收入</li>
                  </ul>
                </PanelBox>
              </Col>
              <Col xs={24} md={8}>
                <PanelBox className="card-item">
                  <Icon type="pay-circle-o" />
                  <ul>
                    <li>${this.state.lastweek}</li>
                    <li>上周收入</li>
                  </ul>
                </PanelBox>
              </Col>
              <Col xs={24} md={8}>
                <PanelBox className="card-item">
                  <Icon type="pay-circle-o" />
                  <ul>
                    <li>${this.state.lastmonth}</li>
                    <li>上月收入</li>
                  </ul>
                </PanelBox>
              </Col>
            </Row>
            <PanelBox title="上周开门数柱状图">
              <Bar
                data={this.state.barData}
              />
            </PanelBox>
          </Col>
          <Col xs={24} md={10}>
            <PanelBox title="上周广告投放数曲线图" bodyStyle={ {'padding': 0} }>
              <Line
                data={this.state.chartData}
              />
            </PanelBox>
            <PanelBox title="开门使用率" bodyStyle={ {'padding': 0} }>
              <Pie
                data={this.state.pieData}
              />
            </PanelBox>
          </Col>
        </Row>

        <PanelBox title="最近收益记录">
          <Table columns={this.columns} dataSource={this.state.data} pagination={{ pageSize: 10 }} scroll={{ y: 240 }} />
        </PanelBox>
      </div>
    )
  }
}
